[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import LoadingScreen from "@/components/loading-screen" import GameMenu from "@/components/game-menu" export default function Home() { const [isLoading, setIsLoading] = useState(true) const [loadingProgress, setLoadingProgress] = useState(0) const [assetsLoaded, setAssetsLoaded] = useState(false) useEffect(() => { // Preload audio file const audio = new Audio( "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E3%83%86%E3%83%88%E3%83%AA%E3%82%B9%20%20%E9%87%8D%E9%9F%B3%E3%83%86%E3%83%88SV%20%20Tetoris%20%28AI%20Filtered%20Instrumental%29%20%5B%20ezmp3.cc%20%5D-Cw297e6Q0rSy6snRGIDbDL6q9TIhxB.mp3", ) // Preload image const img = new Image() img.crossOrigin = "anonymous" img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-sigqQurVHNjXNGBUyMl0JVn13QDLLH.png" // When both assets are loaded Promise.all([ new Promise((resolve) => { img.onload = resolve }), new Promise((resolve) => { audio.addEventListener("canplaythrough", resolve, { once: true }) }), ]).then(() => { setAssetsLoaded(true) }) }, []) useEffect(() => { if (!assetsLoaded) return // Simulate loading process const interval = setInterval(() => { setLoadingProgress((prev) => { if (prev >= 100) { clearInterval(interval) // Add a small delay before showing the menu setTimeout(() => { setIsLoading(false) }, 500) return 100 } return prev + 1 }) }, 50) return () => clearInterval(interval) }, [assetsLoaded]) return (

{isLoading ? : }

) } [V0_FILE]typescriptreact:file="components/loading-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" interface LoadingScreenProps { progress: number } export default function LoadingScreen({ progress }: LoadingScreenProps) { const canvasRef = useRef(null) const imageRef = useRef(null) useEffect(() => { // Create and load the image if (!imageRef.current) { const img = new Image() img.crossOrigin = "anonymous" img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-sigqQurVHNjXNGBUyMl0JVn13QDLLH.png" img.onload = () => { imageRef.current = img drawLoadingAnimation() } } else { drawLoadingAnimation() } function drawLoadingAnimation() { const canvas = canvasRef.current if (!canvas || !imageRef.current) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) const img = imageRef.current // Calculate the size to maintain aspect ratio const size = Math.min(canvas.width, canvas.height) * 0.8 const aspectRatio = img.width / img.height const width = aspectRatio >= 1 ? size : size * aspectRatio const height = aspectRatio >= 1 ? size / aspectRatio : size // Center the image const x = (canvas.width - width) / 2 const y = (canvas.height - height) / 2 // Draw the original image (grayscale version) ctx.drawImage(img, x, y, width, height) // Apply grayscale filter to the entire image const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { if (data[i + 3] > 0) { // If pixel is not transparent const avg = (data[i] + data[i + 1] + data[i + 2]) / 3 data[i] = avg // Red data[i + 1] = avg // Green data[i + 2] = avg // Blue } } ctx.putImageData(imageData, 0, 0) // Now draw the colored version with a wave-like mask based on loading progress ctx.save() // Create a clipping region for the wave effect ctx.beginPath() const waveHeight = 10 // Height of the wave const waveCount = 5 // Number of wave cycles const fillHeight = canvas.height - (canvas.height * progress) / 100 ctx.moveTo(0, canvas.height) // Create wavy top edge for (let i = 0; i <= canvas.width; i++) { const waveY = fillHeight + Math.sin((i / canvas.width) * Math.PI * 2 * waveCount) * waveHeight ctx.lineTo(i, waveY) } ctx.lineTo(canvas.width, canvas.height) ctx.closePath() ctx.clip() // Draw the colored version ctx.drawImage(img, x, y, width, height) ctx.restore() // Draw pixel art border ctx.strokeStyle = "black" ctx.lineWidth = 4 ctx.strokeRect(0, 0, canvas.width, canvas.height) // Draw pixel corners ctx.fillStyle = "black" ctx.fillRect(0, 0, 8, 8) ctx.fillRect(canvas.width - 8, 0, 8, 8) ctx.fillRect(0, canvas.height - 8, 8, 8) ctx.fillRect(canvas.width - 8, canvas.height - 8, 8, 8) } }, [progress]) return (

{progress}%

{/* Artist credit */}

Art by 2strawberry4you

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --primary: 212 100% 65%; --primary-foreground: 210 40% 98%; --secondary: 346 100% 76%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --radius: 0.5rem; } .dark { --background: 224 71% 4%; --foreground: 213 31% 91%; --muted: 223 47% 11%; --muted-foreground: 215.4 16.3% 56.9%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --popover: 224 71% 4%; --popover-foreground: 215 20.2% 65.1%; --border: 216 34% 17%; --input: 216 34% 17%; --card: 224 71% 4%; --card-foreground: 213 31% 91%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 1.2%; --secondary: 222.2 47.4% 11.2%; --secondary-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --ring: 216 34% 17%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; user-select: none; } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } /* TETORIS Theme Styles */ .pixel-block { position: relative; } .pixel-block::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 4px; background-color: rgba(255, 255, 255, 0.7); } .pixel-block::after { content: ""; position: absolute; bottom: 0; right: 0; width: 4px; height: 4px; background-color: rgba(0, 0, 0, 0.3); } /* Prevent text selection */ .select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [V0_FILE]typescriptreact:file="components/tetoris-logo.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export default function TetorisLogo() { // Define the pixel art for each letter const pixelSize = 12 // Increased from 8 to make it bigger // T const T = [ [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], ] // E const E = [ [1, 1, 1, 1], [1, 0, 0, 0], [1, 1, 1, 0], [1, 0, 0, 0], [1, 1, 1, 1], ] // O - special colored one const O = [ [0, 1, 1, 0], [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [0, 1, 1, 0], ] // R const R = [ [1, 1, 1, 0], [1, 0, 0, 1], [1, 1, 1, 0], [1, 0, 1, 0], [1, 0, 0, 1], ] // I const I = [ [1, 1, 1], [0, 1, 0], [0, 1, 0], [0, 1, 0], [1, 1, 1], ] // S const S = [ [0, 1, 1, 1], [1, 0, 0, 0], [0, 1, 1, 0], [0, 0, 0, 1], [1, 1, 1, 0], ] const letterData = [ { letter: T, isSpecial: false }, { letter: E, isSpecial: false }, { letter: T, isSpecial: false }, { letter: O, isSpecial: true }, { letter: R, isSpecial: false }, { letter: I, isSpecial: false }, { letter: S, isSpecial: false }, ] return (

{/* No background, just the letters */}

{letterData.map((item, letterIndex) => ( {item.letter.map((row, rowIndex) => (

{row.map((pixel, pixelIndex) => ( ))}

))} ))}

) } [V0_FILE]typescriptreact:file="components/tetris-background.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion, useAnimation } from "framer-motion" // Define the 7 standard Tetrimino shapes const TETRIMINOS = { I: [ [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0], ], O: [ [1, 1], [1, 1], ], T: [ [0, 1, 0], [1, 1, 1], [0, 0, 0], ], J: [ [1, 0, 0], [1, 1, 1], [0, 0, 0], ], L: [ [0, 0, 1], [1, 1, 1], [0, 0, 0], ], S: [ [0, 1, 1], [1, 1, 0], [0, 0, 0], ], Z: [ [1, 1, 0], [0, 1, 1], [0, 0, 0], ], } // Define TETORIS-themed colors const TETORIS_COLORS = [ "#FF4D6D", // Pink "#FF8FA3", // Light Pink "#4EA8DE", // Blue "#57CC99", // Green "#FFC857", // Yellow "#A06CD5", // Purple "#FF7B00", // Orange ] interface TetriminoProps { type: keyof typeof TETRIMINOS color: string x: number delay: number } const Tetrimino = ({ type, color, x, delay }: TetriminoProps) => { const controls = useAnimation() const blockSize = 20 const matrix = TETRIMINOS[type] useEffect(() => { controls.start({ y: ["0vh", "120vh"], rotate: [0, 90, 180, 270], transition: { y: { duration: 10 + Math.random() * 5, ease: "linear", delay: delay, repeat: Number.POSITIVE_INFINITY, repeatType: "loop", }, rotate: { duration: 5 + Math.random() * 10, ease: "linear", repeat: Number.POSITIVE_INFINITY, repeatType: "loop", }, }, }) }, [controls, delay]) return (

{matrix.map((row, rowIndex) => (

{row.map((cell, cellIndex) => (

))}

) } export default function TetrisBackground() { const [tetriminos, setTetriminos] = useState([]) useEffect(() => { const types = Object.keys(TETRIMINOS) as Array const pieces: React.ReactNode[] = [] // Create 20 random tetriminos for (let i = 0; i < 20; i++) { const randomType = types[Math.floor(Math.random() * types.length)] const randomColor = TETORIS_COLORS[Math.floor(Math.random() * TETORIS_COLORS.length)] const randomX = Math.random() * 90 // Random position from 0-90% const randomDelay = Math.random() * 5 // Random delay for staggered effect pieces.push() } setTetriminos(pieces) }, []) return

{tetriminos}

} [V0_FILE]typescriptreact:file="components/settings-menu.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { ArrowLeft } from "lucide-react" import TetorisButton from "@/components/tetoris-button" interface SettingsMenuProps { onClose: () => void isMusicEnabled: boolean musicVolume: number onMusicToggle: (enabled: boolean) => void onVolumeChange: (volume: number) => void } export default function SettingsMenu({ onClose, isMusicEnabled, musicVolume, onMusicToggle, onVolumeChange, }: SettingsMenuProps) { return (

{/* Yellow background with pixel art border */}

{/* Pixel art border corners */}

{/* Header */}

SETTINGS

{/* Spacer for centering */}

{/* Settings Content */}

{/* Music Toggle */}

Music

Enable or disable background music

{/* Volume Slider */}

Volume

Adjust music volume

onVolumeChange(value[0])} max={100} step={1} className={`${!isMusicEnabled ? "opacity-50" : ""}`} /> {musicVolume}

{/* Music Credits */}

MUSIC CREDITS

"Tetoris (AI Filtered Instrumental)" by Jared-KunYT

{/* Return Button */}

) } [V0_FILE]typescriptreact:file="components/tetoris-button.tsx" isMerged="true" "use client" import { motion } from "framer-motion" interface TetorisButtonProps { label: string onClick: () => void color: "blue" | "pink" | "purple" | "yellow" } export default function TetorisButton({ label, onClick, color }: TetorisButtonProps) { // Define color schemes based on the color prop const colorSchemes = { blue: { bg: "bg-blue-500", shadow: "shadow-blue-700", highlight: "bg-blue-400", text: "text-white", }, pink: { bg: "bg-pink-500", shadow: "shadow-pink-700", highlight: "bg-pink-400", text: "text-white", }, purple: { bg: "bg-purple-500", shadow: "shadow-purple-700", highlight: "bg-purple-400", text: "text-white", }, yellow: { bg: "bg-yellow-400", shadow: "shadow-yellow-600", highlight: "bg-yellow-300", text: "text-gray-800", }, } const scheme = colorSchemes[color] return ( {/* Button base - pixel art style */}

{/* Button shadow/3D effect */}

{/* Button highlight/top */}

{/* Pixel corners */}

{/* Button text */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata, Viewport } from "next" export const metadata: Metadata = { title: "TETORIS Game", description: "A Tetris-inspired game with Kasane Teto theme", } export const viewport: Viewport = { themeColor: "#FBBF24", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/game-over-screen.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface GameOverScreenProps { score: number onRestart: () => void onMainMenu: () => void } export default function GameOverScreen({ score, onRestart, onMainMenu }: GameOverScreenProps) { return (

GAME OVER

YOUR SCORE

{score.toString().padStart(6, "0")}

) } [V0_FILE]typescriptreact:file="components/key-guide.tsx" isEdit="true" isMerged="true" "use client" export default function KeyGuide() { return (

←

→

Move

↓

Soft Drop

↑

Rotate

SPACE

Hard Drop

Pause

) } [V0_FILE]typescriptreact:file="components/tetris-game.tsx" isFixed="true" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import GameOverScreen from "./game-over-screen" import KeyGuide from "./key-guide" // Tetris game constants const BOARD_WIDTH = 10 const BOARD_HEIGHT = 20 const BLOCK_SIZE = 30 // Pixel size of each block const LEVEL_SPEED = [800, 650, 500, 400, 300, 250, 200, 150, 100, 80, 50] // ms per drop // Audio URLs const LINE_CLEAR_SOUND_URL = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/NES%20Tetris%20Sound%20Effect_%20Tetris%20Clear%20%5B%20ezmp3.cc%20%5D-5XTgKAM6n0llLgC1JaFq5SiOKAVHzA.mp3" // Tetrimino shapes with our theme colors const TETRIMINOS = { I: { shape: [ [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0], ], color: "#4EA8DE", // Blue }, O: { shape: [ [1, 1], [1, 1], ], color: "#FFC857", // Yellow }, T: { shape: [ [0, 1, 0], [1, 1, 1], [0, 0, 0], ], color: "#A06CD5", // Purple }, J: { shape: [ [1, 0, 0], [1, 1, 1], [0, 0, 0], ], color: "#57CC99", // Green }, L: { shape: [ [0, 0, 1], [1, 1, 1], [0, 0, 0], ], color: "#FF7B00", // Orange }, S: { shape: [ [0, 1, 1], [1, 1, 0], [0, 0, 0], ], color: "#FF8FA3", // Light Pink }, Z: { shape: [ [1, 1, 0], [0, 1, 1], [0, 0, 0], ], color: "#FF4D6D", // Pink }, } // Create an empty game board const createEmptyBoard = () => { return Array.from({ length: BOARD_HEIGHT }, () => Array.from({ length: BOARD_WIDTH }, () => 0)) } // Get a random tetrimino const getRandomTetrimino = () => { const tetriminos = Object.keys(TETRIMINOS) as Array const randTetrimino = tetriminos[Math.floor(Math.random() * tetriminos.length)] return { ...TETRIMINOS[randTetrimino], type: randTetrimino, } } // Initial position for new tetriminos const initialPosition = { x: Math.floor(BOARD_WIDTH / 2) - 1, y: 0, } interface TetrisGameProps { onReturn: () => void } export default function TetrisGame({ onReturn }: TetrisGameProps) { const [board, setBoard] = useState(createEmptyBoard()) const [currentPiece, setCurrentPiece] = useState(getRandomTetrimino()) const [nextPiece, setNextPiece] = useState(getRandomTetrimino()) const [position, setPosition] = useState({ ...initialPosition }) const [gameOver, setGameOver] = useState(false) const [score, setScore] = useState(0) const [level, setLevel] = useState(1) const [lines, setLines] = useState(0) const [isPaused, setIsPaused] = useState(false) // Audio refs const lineClearSoundRef = useRef(null) const dropIntervalRef = useRef(null) // Initialize audio useEffect(() => { // Create audio elements lineClearSoundRef.current = new Audio(LINE_CLEAR_SOUND_URL) // Clean up return () => { if (lineClearSoundRef.current) { lineClearSoundRef.current.pause() lineClearSoundRef.current = null } } }, []) // Function to play line clear sound const playLineClearSound = useCallback(() => { if (lineClearSoundRef.current) { // Reset the audio to the beginning if it's already playing lineClearSoundRef.current.currentTime = 0 lineClearSoundRef.current.play().catch((err) => console.error("Error playing sound:", err)) } }, []) // Toggle pause state const togglePause = useCallback(() => { setIsPaused((prev) => !prev) }, []) // Check for collisions with other pieces or the board edges const checkCollision = useCallback( (piece, pos) => { for (let y = 0; y < piece.shape.length; y++) { for (let x = 0; x < piece.shape[y].length; x++) { // If this is a filled square in the tetrimino if (piece.shape[y][x]) { const boardX = pos.x + x const boardY = pos.y + y // Check if outside board limits if (boardX < 0 || boardX >= BOARD_WIDTH || boardY >= BOARD_HEIGHT) { return true } // Check if overlapping a placed piece (and not above the board) if (boardY >= 0 && board[boardY][boardX]) { return true } } } } return false }, [board], ) // Update the board with the current piece const updateBoard = useCallback(() => { // Create a new board with the current piece in its final position const newBoard = [...board.map((row) => [...row])] for (let y = 0; y < currentPiece.shape.length; y++) { for (let x = 0; x < currentPiece.shape[y].length; x++) { if (currentPiece.shape[y][x]) { const boardY = position.y + y const boardX = position.x + x // Only update if the piece is within the board if (boardY >= 0 && boardY < BOARD_HEIGHT && boardX >= 0 && boardX < BOARD_WIDTH) { newBoard[boardY][boardX] = currentPiece } } } } // Check for completed lines const completedLines: number[] = [] for (let y = 0; y < BOARD_HEIGHT; y++) { if (newBoard[y].every((cell) => cell !== 0)) { completedLines.push(y) } } // Remove completed lines and add new empty rows at the top if (completedLines.length > 0) { // Play line clear sound effect playLineClearSound() // Update score based on the number of lines cleared const linePoints = [40, 100, 300, 1200] // Points for 1, 2, 3, and 4 lines const points = linePoints[completedLines.length - 1] * level setScore((prevScore) => prevScore + points) // Update lines cleared count setLines((prevLines) => { const newLines = prevLines + completedLines.length // Update level based on lines cleared setLevel(Math.floor(newLines / 10) + 1) return newLines }) // Remove the completed lines and add new empty rows const filteredBoard = newBoard.filter((_, index) => !completedLines.includes(index)) const newRows = Array.from({ length: completedLines.length }, () => Array.from({ length: BOARD_WIDTH }, () => 0)) setBoard([...newRows, ...filteredBoard]) } else { setBoard(newBoard) } // Check for game over if (position.y <= 0) { setGameOver(true) if (dropIntervalRef.current) { clearInterval(dropIntervalRef.current) } return } // Reset position and get a new piece setPosition({ ...initialPosition }) setCurrentPiece(nextPiece) setNextPiece(getRandomTetrimino()) }, [board, currentPiece, nextPiece, position, level, playLineClearSound]) // Rotate a piece const rotate = useCallback((piece) => { // Create a new rotated matrix const newShape = piece.shape.map((_, index) => piece.shape.map((row) => row[index]).reverse()) return { ...piece, shape: newShape } }, []) // Try to rotate, checking for collisions const tryRotate = useCallback(() => { const rotatedPiece = rotate(currentPiece) if (!checkCollision(rotatedPiece, position)) { setCurrentPiece(rotatedPiece) } }, [currentPiece, position, rotate, checkCollision]) // Move the piece horizontally const moveHorizontal = useCallback( (direction) => { if (gameOver || isPaused) return const newPos = { ...position, x: position.x + direction } if (!checkCollision(currentPiece, newPos)) { setPosition(newPos) } }, [currentPiece, position, checkCollision, gameOver, isPaused], ) // Move the piece down const moveDown = useCallback(() => { if (gameOver || isPaused) return const newPos = { ...position, y: position.y + 1 } if (!checkCollision(currentPiece, newPos)) { setPosition(newPos) return } // Collision detected, lock the piece in place updateBoard() }, [currentPiece, position, checkCollision, gameOver, isPaused, updateBoard]) // Hard drop the piece to the bottom const hardDrop = useCallback(() => { if (gameOver || isPaused) return // First, find the lowest valid position let newY = position.y let collisionDetected = false // Keep moving down until collision is detected while (!collisionDetected && newY < BOARD_HEIGHT) { if (checkCollision(currentPiece, { x: position.x, y: newY + 1 })) { collisionDetected = true } else { newY++ } } // Update position first and force a re-render setPosition({ x: position.x, y: newY }) // Use a useEffect to handle the piece locking after position update }, [currentPiece, position.x, position.y, checkCollision, gameOver, isPaused, BOARD_HEIGHT]) // Add this new useEffect to handle piece locking after hard drop useEffect(() => { // This effect will run after position updates // Check if current position would collide if moved down // If it would, then lock the piece if (!gameOver && !isPaused && position.y > 0) { if (checkCollision(currentPiece, { x: position.x, y: position.y + 1 })) { // Lock piece after a very short delay to ensure rendering const lockTimeout = setTimeout(() => { updateBoard() }, 50) return () => clearTimeout(lockTimeout) } } }, [position.x, position.y, currentPiece, checkCollision, updateBoard, gameOver, isPaused]) // Set up keyboard controls useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (gameOver) return switch (e.key) { case "ArrowLeft": moveHorizontal(-1) break case "ArrowRight": moveHorizontal(1) break case "ArrowDown": moveDown() break case "ArrowUp": tryRotate() break case " ": // Space bar hardDrop() break case "p": case "P": togglePause() break default: break } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [moveHorizontal, moveDown, tryRotate, hardDrop, gameOver, togglePause]) // Restart the game const restartGame = useCallback(() => { setBoard(createEmptyBoard()) setCurrentPiece(getRandomTetrimino()) setNextPiece(getRandomTetrimino()) setPosition({ ...initialPosition }) setGameOver(false) setScore(0) setLevel(1) setLines(0) setIsPaused(false) }, []) // Set up automatic dropping useEffect(() => { if (!gameOver && !isPaused) { if (dropIntervalRef.current) { clearInterval(dropIntervalRef.current) } const dropSpeed = LEVEL_SPEED[Math.min(level - 1, LEVEL_SPEED.length - 1)] dropIntervalRef.current = setInterval(() => { moveDown() }, dropSpeed) } else if (dropIntervalRef.current) { clearInterval(dropIntervalRef.current) } return () => { if (dropIntervalRef.current) { clearInterval(dropIntervalRef.current) } } }, [level, moveDown, gameOver, isPaused]) // Render the current piece on the board const renderPiece = () => { return currentPiece.shape.map((row, y) => { return row.map((cell, x) => { if (cell) { const boardX = position.x + x const boardY = position.y + y // Only render if the piece is within the board if (boardY >= 0 && boardY < BOARD_HEIGHT && boardX >= 0 && boardX < BOARD_WIDTH) { return (

) } } return null }) }) } // Render the board with placed pieces const renderBoard = () => { return board.map((row, y) => { return row.map((cell, x) => { return (

) }) }) } // Update the renderNextPiece function const renderNextPiece = () => { const shape = nextPiece.shape const color = nextPiece.color const previewSize = 18 // Slightly larger block size for preview // Calculate the actual dimensions of the piece matrix (excluding empty rows/columns) const pieceRows = shape.filter((row) => row.some((cell) => cell === 1)) const pieceWidth = shape[0].length const pieceHeight = shape.length // Calculate the total size the piece will occupy const totalWidth = pieceWidth * previewSize const totalHeight = pieceHeight * previewSize // Calculate offsets to center in the container (which is 72px inner content area) const offsetX = (72 - totalWidth) / 2 const offsetY = (72 - totalHeight) / 2 return (

{/* Inner border for pixel art effect */}

{shape.map((row, y) => { return row.map((cell, x) => { if (cell) { return (

) } return null }) })}

) } // Update the game info section in the return statement return (

{gameOver ? ( ) : (

{/* Game board */}

{renderBoard()}

{!isPaused && renderPiece()} {/* Pause overlay */} {isPaused && (

PAUSED

)}

{/* Game info */}

{/* Next piece preview */}

{renderNextPiece()}

{/* LCD-style displays */}

SCORE

{score.toString().padStart(6, "0")}

LEVEL

{level.toString().padStart(2, "0")}

LINES

{lines.toString().padStart(4, "0")}

)} {/* Key guide */}

) } [V0_FILE]typescriptreact:file="components/game-menu.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { motion, AnimatePresence } from "framer-motion" import TetorisLogo from "@/components/tetoris-logo" import TetrisBackground from "@/components/tetris-background" import SettingsMenu from "@/components/settings-menu" import TetorisButton from "@/components/tetoris-button" import TetrisGame from "@/components/tetris-game" // Create an audio context and management outside the component let audioContext: AudioContext | null = null let audioSource: AudioBufferSourceNode | null = null let gainNode: GainNode | null = null let audioBuffer: AudioBuffer | null = null let isPlaying = false export default function GameMenu() { const [showMenu, setShowMenu] = useState(false) const [showSettings, setShowSettings] = useState(false) const [isMusicEnabled, setIsMusicEnabled] = useState(false) const [musicVolume, setMusicVolume] = useState(50) const [playingGame, setPlayingGame] = useState(false) // Initialize audio context and load audio useEffect(() => { const initAudio = async () => { if (!audioContext) { audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) try { const response = await fetch( "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E3%83%86%E3%83%88%E3%83%AA%E3%82%B9%20%20%E9%87%8D%E9%9F%B3%E3%83%86%E3%83%88SV%20%20Tetoris%20%28AI%20Filtered%20Instrumental%29%20%5B%20ezmp3.cc%20%5D-Cw297e6Q0rSy6snRGIDbDL6q9TIhxB.mp3", ) const arrayBuffer = await response.arrayBuffer() audioBuffer = await audioContext.decodeAudioData(arrayBuffer) } catch (error) { console.error("Error loading audio:", error) } } } initAudio() return () => { if (audioContext) { audioContext.close() audioContext = null audioBuffer = null isPlaying = false } } }, []) // Handle music playback const playMusic = useCallback(() => { if (!audioContext || !audioBuffer || !gainNode || isPlaying) return audioSource = audioContext.createBufferSource() audioSource.buffer = audioBuffer audioSource.loop = true audioSource.connect(gainNode) // Set initial volume gainNode.gain.value = musicVolume / 100 audioSource.start(0) isPlaying = true // Handle when the audio ends audioSource.onended = () => { isPlaying = false if (isMusicEnabled) playMusic() // Restart if music is still enabled } }, [musicVolume, isMusicEnabled]) // Handle music toggle const handleMusicToggle = useCallback( (enabled: boolean) => { setIsMusicEnabled(enabled) if (gainNode) { if (enabled) { gainNode.gain.value = musicVolume / 100 if (!isPlaying) playMusic() } else { gainNode.gain.value = 0 } } }, [musicVolume, playMusic], ) // Handle volume change const handleVolumeChange = useCallback( (volume: number) => { setMusicVolume(volume) if (gainNode && isMusicEnabled) { gainNode.gain.value = volume / 100 } }, [isMusicEnabled], ) // Start music when menu shows useEffect(() => { if (showMenu && isMusicEnabled && !isPlaying) { playMusic() } }, [showMenu, isMusicEnabled, playMusic]) // Show menu after delay useEffect(() => { const timer = setTimeout(() => setShowMenu(true), 1000) return () => clearTimeout(timer) }, []) // Handle game start const startGame = () => { setPlayingGame(true) } // Return to main menu const returnToMenu = () => { setPlayingGame(false) } return (

{/* Pixel art grid overlay */}

{/* Tetris blocks falling background - only show when not playing */} {!playingGame && (

)} {/* Game or Menu */} {playingGame ? ( ) : ( /* Menu overlay */ {showMenu && (

{/* TETORIS Logo */}

setShowSettings(true)} label="SETTINGS" color="pink" /> window.open("https://www.youtube.com/watch?v=Soy4jGPHr3g", "_blank")} label="QUIT" color="purple" />

)} )} {/* Settings Menu - Black background appears instantly */} {showSettings && (

setShowSettings(false)} isMusicEnabled={isMusicEnabled} musicVolume={musicVolume} onMusicToggle={handleMusicToggle} onVolumeChange={handleVolumeChange} />

)}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This